@()(implicit request: RequestHeader,messages: Messages)
@main(messages("myTasks"))("allMission","") {

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/tableFilter.css")">

	<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/filter-control/my-bootstrap-table-filter-control.js")" type="text/javascript"></script>

	<style>
			.genome-pre {
				white-space: pre-wrap;
				word-wrap: break-word;
				border: 0px solid #ccc;
				background-color: white;
			}

			select:not([multiple]) {
				-webkit-appearance: none;
				-moz-appearance: none;
				background-position: right 50%;
				background-repeat: no-repeat;
				background-image: url();
				padding: .5em;
				padding-right: 1.5em
			}

			.fr {
				float: right;
			}

			.base-info .item .title span {
				display: inline-block;
				border-left: 2px solid #0b8af4;
				font-size: 14px;
				color: #333;
				padding-left: 10px;
			}

			.photo span {
				display: block;
				width: 92px;
				height: 92px;
			}

			.photo img {
				width: 100%;
				height: 100%;
			}

			tr > td {
				padding-top: 10px !important;
				padding-bottom: 10px !important;
			}

			.glyphicon-remove::before {
				content: "" !important;
			}

			.fglefttitle {
				font-size: 30px;
				font-weight: lighter;
				color: #A2A2A2;
			}

	</style>
	<div class="page-content">

		<div class="row">
			<div class="col-md-12">
				<div id="form_wizard_1" class="portlet light profile-sidebar-portlet bordered">

					<div class="portlet-title">
						<div class="item">
							<div class="title clear">
								<span>@messages("myTasks")</span>
							</div>
						</div>
						<div class="caption">
						</div>
					</div>

					<div class="portlet-body form">

						<div class="table-responsive">

							<div id="toolbar" style="margin-bottom: 5px">
								<button type="button" class="btn btn-primary idsButton" disabled >
									<i class="fa fa-trash"></i>&nbsp;@messages("delete")
								</button>
							</div>

							<div style="display: none;
								margin-bottom: 10px">@{messages("filteringAndSort")}：
								<span id="filterCondition">

									<span class="eachFilterCondition" style="display: none">
										<span >Gene ID</span>
										<span style="color: red">LIKE</span>
										AT
										<sup style="" class="mySup" onclick="SampleManage.removeCondition">
											<i class="fa fa-times-circle"></i>
										</sup>
									</span>

								</span>
							</div>

							<div style="display: none;
								margin-bottom: 10px">@{messages("sortingConditions")}：
								<span id="sortCondition">

									<span class="eachFilterCondition" style="display: block">
										<span >Gene ID ,</span>
										<span style="color: red">@messages("ascending")</span>
										<sup style="" class="mySup" onclick="SampleManage.removeCondition">
											<i class="fa fa-times-circle"></i>
										</sup>
									</span>

								</span>
							</div>

							<table class="display table table-bordered" id="table" data-pagination="true"
							data-page-list="[10, 25, 50, 100, all]" style="margin-top: 5px">
								<thead>

									<tr class="myTr">

									</tr>

								</thead>
							</table>

							<div id="allFilterContent">

							</div>

						</div>

					</div>

				</div>
			</div>
		</div>

		<div id="updateModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 650px">
				<div class="modal-content">
					<div class="modal-header bg-primary">
						<h4 class="modal-title">
							<i class="fa fa-edit"></i>
							<span id="lblAddTitle" style="font-weight: bold">@messages("modify")</span>
						</h4>
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
							<i class="fa fa-remove"></i>
						</button>
					</div>
					<form class="form-horizontal" id="updateForm" action="" data-toggle="validator">
						<div class="modal-body">
							<div class="row-fluid">

								<input hidden name="missionId">

								<div class="form-group">
									<label class="control-label col-sm-3">@messages("theOriginalTaskName"):</label>
									<div class="col-sm-6">
										<input class="form-control" name="orignalMissionName" readonly/>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-3">@messages("theNewTaskName"):</label>
									<div class="col-sm-6">
										<input class="form-control" name="missionName" />
									</div>
								</div>

							</div>
						</div>
						<div class="modal-footer bg-info">
							<input type="hidden" id="id" name="id" />
							<button type="button" class="btn blue myUpdateName" >
								@messages("confirm")</button>
							<button type="button" class="btn green" data-dismiss="modal">
								@messages("cancel")</button>
						</div>
					</form>
				</div>
			</div>
		</div>

	</div>

	<script>

			var id = "@request.session.get("id")"

			Header.selectHeader("mission")

			$(function () {
				Tool.fileInput
				MissionManage.init

			})
	</script>


}
